<template>
  <div>
    <Vheader title="申请退款"></Vheader>
    <section class="box1" v-cloak>
        <ul class="main">
          <li class="goods_img">
            <img :src="list.images">
          </li>
          <li class="goods_con">
            <p class="title">{{list.productName}}</p>
            <p class="leval"><span v-for="attr in list.attributes">{{attr.name}}</span></p>
            <!-- <p class="price_num"><span class="price">￥{{list.amount}}</span><span class="num">×{{list.count}}</span></p> -->
          </li>
        </ul>
        <p class="flex_style" style="margin-top: 6px;" @click="checkyy"><span>退款原因</span><span><span>请选择</span><span class="iconfont icon-right"></span></span></p>
        <p class="yylist"><span class="message" v-for="(item,index) in yylist">{{index}}:{{item}}</span></p>
        <p class="flex_style"><span>退款金额:</span><span style="color: red">￥{{price}}</span></p>
        <p style="height:36px;line-height: 36px;padding: 0 4vw;">最多可退还￥{{price}} 含发货邮费￥{{}}</p>
        <label class="flex_style" style="color: #000;"><span>退款说明: <input type="text" name="" value="" placeholder="选填" v-model="instruction"></span></label>
        <div class="photo">
        	<p>上传凭证</p>
        	<div class="photobox">
        		<div class="addphoto">
        			<span></span>
        			<span>上传凭证(最多三张)</span>
        			<input type="file" name="" @change="getimg($event)">
        		</div>
        		<div class="showphoto" v-for="item in imglist">
        			<img :src="item" alt="">
        		</div>
        	</div>
        </div>
        <p class="ok" @click="backok">提交</p>
  	</section>
  	<section class="shade" v-show="shade">
  		<ul>
  			<p>退款原因</p>
  			<li class="flex_style"><span>我不想要了</span><input type="checkbox" name="ckbox" value="我不想要了"></li>
  			<li class="flex_style"><span>退运费</span><input type="checkbox" name="ckbox" value="退运费"></li>
  			<li class="flex_style"><span>外观/型号/参数等与商品描述不符</span><input type="checkbox" name="ckbox" value="外观/型号/参数等与商品描述不符"></li>
  			<li class="flex_style"><span>功能/效果不符</span><input type="checkbox" name="ckbox" value="功能/效果不符"></li>
  			<li class="flex_style"><span>少件/漏发</span><input type="checkbox" name="ckbox" value="少件/漏发"></li>
  			<li class="flex_style"><span>包装/商品破损</span><input type="checkbox" name="ckbox" value="包装/商品破损"></li>
  			<button @click="close">关闭</button>
  		</ul>
  	</section>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vheader from '../../components/header.vue'
  import axios from '../../axios/axios'
  export default {
    data() {
      return {
        title:'',
        list:{},
        price:'',
        ordernumber:'',
        shuoming:'',
        instruction:'',
        reason:'',
        imglist:[],
        shade:false,
        yylist:[],
      };
    },
    created() {

    },
    mounted() {
      var that=this;
      var goods=JSON.parse(sessionStorage.getItem('backMessage'))
      that.list=goods.productInfo;
      that.price=goods.amount;
      that.ordernumber=goods.orderNo;
      console.log(goods)
    },
    methods: {
    	backok: function(){
    		var message=$('.message').html();
    		 var data = JSON.stringify({
	          	"actionName": "refund",
				"controllerName": "orderInfo",
				"data": [{
					"orderNo": this.ordernumber,
					"quitDescr": message,
					"quitRemark": this.instruction,
				}]
	        });
	        axios.post({
	          data: data,
	          callback(res) {
	            console.log(res.data)
	          }
	        })
    	},
    	checkyy: function(){
    		this.shade=true
    	},
    	getimg: function(e){
    		if(this.imglist.length==3){
    			alert('最对选3张')
    		}else{
    			console.log(URL.createObjectURL(e.target.files[0]));
	    		var imgs=URL.createObjectURL(e.target.files[0]);
	    		this.imglist.push(imgs)
    		}
    		// var files = Array.prototype.slice.call(e.target.files);
    	},
    	close: function(){
    		for (var i = 0; i <6; i++) {
    		 	if($('input[type=checkbox]')[i].checked){
	    			console.log($('input[type=checkbox]')[i].value)
	    			this.yylist.push($('input[type=checkbox]')[i].value)
	    		}
    		}
    		this.shade=false
    	}
    },
    components: {Vheader}
  };
</script>

<style type="text/scss" lang="scss">
  @import "../../common/style/public";
	.shade{
		width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.3);position: fixed;left: 0;top: 0;z-index: 102;
		ul{
			position: fixed;bottom: 0;left: 0;background-color: #fff;padding: 4vw;width:92vw; 
			p{
				text-align: center;line-height: 36px;height: 36px;border-bottom: solid 1px #e3e3e3;
			}
			li{
				width: 100%;height: 36px;line-height: 36px;border-bottom: solid 1px #e3e3e3;
				input{
					width: 16px;height: 16px;margin-top: 10px;
				}
			}
			button{
				width: 80vw;margin-left: 6vw;background-color: #f14f00;height: 36px;border:1px solid red;border-radius: 8px;color: #fff;font-size: 18px;margin-top: 20px;
			}
		}
	}
	.box1{
	    background-color: #f5f5f5;padding-bottom: 60px;margin-top:40px;
	    .main{
	      margin-top: 50px;
	      background-color: #fff;display: flex;justify-content: space-between;
	      height: 30vw;padding: 2vw 2vw;
	      .goods_img{
	        width: 30vw;height:30vw;
	        img{
	          width: 100%;height:100%;
	        }
	      }
	      .goods_con{
	        width: 62vw;height: 100%;padding: 0 1vw;
	        .title{
	          font-size: 14px;
	          width:100%;
	          overflow : hidden;
	          text-overflow: ellipsis;
	          display: -webkit-box;
	          -webkit-line-clamp:2;
	          -webkit-box-orient: vertical;
	          margin-top: 6px;
	        }
	        .leval{
	          font-size: 14px;color: gray;height: 12vw;line-height: 12vw;
	          span{margin-right: 8px;}
	        }
	        .price_num{
	          display: flex;justify-content: space-between;
	          .price{color: red;}
	        }
	        .num{color: gray;font-size: 14px;margin-right: 8px;}
	      }
	    }
	    .flex_style{
	      background-color: #fff;margin-bottom: 1px;height:10vw;line-height: 10vw;padding: 0 4vw;color: gray;
	    }
	    p{
	      .priceStyle{
	          color: red;
	        }
	      span{
	        a{
	          display: inline-block;width: 16px;height:16px;border-radius: 50%;border: 1px solid #e3e3e3;position: relative;top: 3px;margin-right: 6px;
	        }
	      }
	    }
	    .photo{
	      	margin-top: 6px;
	      	background-color: #fff;
	      	padding: 0 4vw;
	      	p{
	      		height: 36px;line-height: 36px;
	      	}
	      	.photobox{
	      		padding: 8px 0;
	      		height:80px;
	      		.addphoto{
	      			float: left;
	      			width:60px;height: 60px;border: 1px dashed  #e3e3e3;display: flex;padding: 10px;
					flex-direction: column;
					justify-content: center;
					span{
						display: backok;height: 50%;font-size: 12px;text-align: center;color: gray;
					}
					input{
						position: absolute;width:60px;opacity: 0;
					}
					
	      		}
	      		.showphoto{
	      			float: left;width:80px;height: 80px;border: 1px dashed  #e3e3e3;
	      			img{
						width: 100%;height: 100%;
					}
	      		}
	      	}
	      	.addPhoto{
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left:10px;
				height: 100px;
			}
			#file{
				position: relative;
				width: 70px;
				height: 70px;
				top: -70px;
				opacity: 0;
				z-index: 10;
				border:1px solid #e3e3e3;
			}
			#showImg span{
				display: inline-block;
				width: 80px;
				height: 80px;
				margin-left: 10px;
			}
			#showImg span img{
				width: 100%;
				height: 100%;
			}
	    }
	    .ok{
	    	margin-top: 40px;width: 80vw;margin-left: 10vw;height: 36px;line-height: 36px;text-align: center;background-color: #f14f00;border-radius: 8px;color: #fff;font-size: 18px;
	    }
	    .yylist{
	    	padding: 4px 4vw;
	    	span{
	    		border-radius:4px;border:1px solid #gray;padding: 4px;margin-top: 6px;
	    	}
	    }
	}
</style>
